<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>{{title}}</span>
                    <svg-icon name="icon-screen" svgClass='screen-svg' @click="openChart" />
                </div>
            </template>
            <!-- 不能删除这个多余的div -->
            <div>
                <div :class="[String(className)]" :style='styles'></div>
            </div>
        </el-card>
        <!-- 全屏显示 -->
        <div :class="{ show: isFull, hide: !isFull }" v-if='isFull'>
            <div class="flx-column">
                <p>
                    <svg-icon name="icon-screen" svgClass='screen-svg' @click="closeChart" />
                </p>
                <div id="fullScreen"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import SvgIcon from 'svgIcon/SvgIcon.vue';
import { defineComponent, ref, reactive, watch, computed, onMounted, onBeforeUnmount } from 'vue';
// base64转换blob
import { base64ToBlob } from 'utils/base64Toblob';
export default defineComponent({
    components: { SvgIcon },
    props: {
        seriesData: {
            type: Array,
            require: true
        },
        legendName: {
            type: Array,
            default: () => {
                return [];
            }
        },
        xName: {
            type: Array,
            default: () => {
                return [];
            }
        },
        yUnit: {
            type: String,
            default: ''
        },
        yMax: {
            type: Number,
            default: null
        },
        extendsColor: {
            type: Array,
            default: () => {
                return ['#57ABEB', '#54CD9B', '#F7BD64'];
            }
        },
        areaColor: {
            type: Array,
            default: () => {
                return [];
            }
        },
        tooltipFormatter: {
            type: Object,
            default: () => {
                return {};
            }
        },
        styles: {
            type: Object,
            default: () => {
                return { width: '100%', height: '300px' };
            }
        },
        title: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        let className: any = Number.parseInt(Math.random() * 100000);
        let echar: any = ref(null);

        let dataLsit: Array = [];
        // 应为数据原因，柱状图只有一个,展示不协调 使用(barGap: '-100%') 将3个柱状体重合
        props.seriesData.forEach((r: any) => {
            dataLsit.push({
                type: 'bar',
                barGap: '-100%',
                name: r.name,
                data: r.data,
                itemStyle: {
                    color: r.color,
                    borderRadius: [0, 10, 10, 0]
                },
                // 柱状图末尾字体设置
                label: {
                    show: true,
                    position: 'right',
                    fontSize: 14,
                    formatter(data: any) {
                        return data.value + '%';
                    }
                },
                // 柱状粗细
                barWidth: 20
            });
        });
        let options = reactive({
            color: props.extendsColor,
            // 鼠标悬浮
            tooltip: {
                backgroundColor: 'rgba(245,245,245,0.85)',
                borderColor: '#94C3F5',
                borderWidth: 1,
                className: 'barTip',
                axisPointer: {
                    lineStyle: {
                        type: 'solid',
                        color: '#DBDEE2'
                    }
                },
                textStyle: {
                    color: '#555D70'
                },
                ...props.tooltipFormatter
            },
            //点击内容
            legend: {
                data: props.legendName,
                bottom: 0,
                itemWidth: 30,
                itemHeight: 6,
                itemGap: 16
            },
            // 边距
            grid: {
                top: '0',
                left: '0',
                right: '42',
                bottom: '20%',
                containLabel: true
            },
            // X轴
            xAxis: {
                type: 'value',
                min: 0,
                max: 100,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#606266'
                    }
                },
                axisLabel: {
                    formatter: function(value: any) {
                        if (value === 0) {
                            return `  ` + value;
                        }
                        return value;
                    },
                    color: '#606266'
                }
            },
            // Y轴
            yAxis: {
                type: 'category',
                // Y轴反向
                inverse: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#606266'
                    }
                }
            },
            series: dataLsit
        });

        // 导出图片
        const saveImage = (name: any) => {
            let content = echar.getDataURL({
                type: 'png',
                backgroundColor: '#fff',
                excludeComponents: ['toolbox']
            });
            let aLink = document.createElement('a');
            let blob = base64ToBlob(content);
            let evt = document.createEvent('HTMLEvents');
            evt.initEvent('click', true, true);
            aLink.download = name + '.png' || '';
            aLink.href = URL.createObjectURL(blob);
            aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
        };

        const initEcharts = (dataId: string) => {
            // 切换显示全屏内容
            let node: any = '';
            if (dataId == 'fullScreen') {
                node = document.getElementById(dataId);
            } else {
                node = document.getElementsByClassName(className)[0];
            }
            echar = echarts.init(node);
            //传值存在就push
            if (props.yStyle) {
                options.yAxis.push(props.yStyle);
            }
            echar.setOption(options, true);
        };
        const resize = () => {
            if (echar.resize) {
                echar.resize();
            }
        };
        // 全屏功能
        let isFull = ref(false); //false为放大，true为缩小
        // 打开
        const openChart = () => {
            isFull.value = true;
            setTimeout(() => {
                initEcharts('fullScreen');
            }, 200);
        };
        // 关闭
        const closeChart = () => {
            if (isFull.value == true) {
                isFull.value = false;
            }
        };
        watch(
            () => props.seriesData,
            (data: any, old: any) => {
                if (data) {
                    echar.setOption(options, true);
                }
                resize();
            },
            {
                deep: true
            }
        );

        onMounted(() => {
            initEcharts('');
            window.addEventListener('resize', resize);
        });
        onBeforeUnmount(() => {
            window.removeEventListener('resize', resize);
            echar.dispose && echar.dispose();
        });

        return { className, options, saveImage, isFull, openChart, closeChart };
    }
});
</script>

<style lang="scss">
.barTip > div > div:first-child {
    border-bottom: 1px solid #ced2d9;
    padding-bottom: 7px;
}

.barTip > div > div > div > div > div > span:last-of-type {
    position: relative;
    padding-left: 10px;
    margin-left: 0 !important;
    &::before {
        content: '：';
        position: absolute;
        top: 0;
        left: 0;
    }
}

.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #ffffff;
}
.flx-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    > p {
        padding: 20px;
        text-align: right;
    }
}
#fullScreen {
    flex: 1;
    padding: 20px;
}
.hide {
    display: none;
}
</style>